<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>慕课网-程序员的梦工厂</title>
    <link rel="shortcut icon" href="./img/favicon.ico">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2493535_o0hbx0j1kpj.css">
</head>

<body>
    <!-- 弹出层和弹出框 -->
    <div id="popLayer">
    </div>
    <!-- 登录 -->
    <div id="popBox">
        <div class="loginMethods">
            <span class='zhanghao denglu activeLogin'>账号登陆</span>
            <span class='yzm denglu'>验证码登录</span>
            <span class="glyphicon glyphicon-remove closeBox"></span>
        </div>
        <div>
            <div class="input-items">
                <form action="">
                    <div class="zh">
                        <div class="inputItem">
                            <input type="text" required
                                pattern="^\d{11}$|^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$" id='emailPhoneNum'
                                class="form-control loginput" placeholder="请输入登录手机号/邮箱" style='padding-left: 20px;'>
                            <p class='validity'>请输入正确的邮箱或手机号</p>
                        </div>
                        <div class="inputItem">
                            <input type="password" required pattern="^\S{8,20}$" id="psw1"
                                class="form-control loginput yzminput pswInput" placeholder="请输入密码">
                            <a href="" class='iconfont icon-yanjing-guan getMa see'></a>
                            <p class='validity'>请输入8-20位密码，区分大小写，不能使用空格！</p>
                        </div>
                        <div class="inputItem autoLG">
                            <label for="autoLogin" class='autoLogin'>
                                <input type="checkbox" name="" class="autoLogin1">7天内自动登录</label>
                            <a href="">找回账号</a>
                        </div>
                        <div class="inputItem">
                            <input type="submit" value="登录" id='loginBtn1' class='loginBtn' />
                        </div>
                    </div>
                </form>

                <form action="">
                    <div class="yz">
                        <div class="inputItem">
                            <span class='leftspan'>+86</span>
                            <input type="tel" pattern="^\d{11}$" required id="phoneNum" class="form-control loginput"
                                placeholder="短信登陆仅限中国大陆用户">
                            <p class='validity'>请输入正确的手机号</p>
                        </div>
                        <div class="inputItem">
                            <input type="text" class="form-control loginput yzminput" id="yzm" pattern="^[a-z0-9]{4}$"
                                placeholder="请输入短信验证码">
                            <a href="" class='getMa'>获取验证码</a>
                            <p class='validity'>请输入正确验证码</p>
                        </div>
                        <div class="inputItem autoLG">
                            <label for="autoLogin" class='autoLogin'>
                                <input type="checkbox" name="" class="autoLogin1">7天内自动登录</label>
                            <a href="">找回账号</a>
                        </div>

                        <div class="inputItem">
                            <input type="submit" value="登录" id='loginBtn2' class='loginBtn' />
                        </div>
                    </div>

                </form>

                <div class="loginfooter">
                    <a class="quickLg">
                        快速注册
                    </a>
                    <span>
                        其他方式登录
                    </span>
                    <div class="lgmd">
                        <a href="" class='iconfont icon-weibo'></a>
                        <a href="" class='iconfont icon-weixin'></a>
                        <a href="" class="iconfont icon-qq"></a>
                    </div>
                    <p>登录即同意慕课网 <a>《隐私政策》</a></p>
                    <div class="erweima"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 注册 -->
    <div id="registerBox">
        <div class="loginMethods">
            <span class='denglu'>快速注册</span>
            <span class="glyphicon glyphicon-remove closeBox"></span>
        </div>
        <div>
            <div class="input-items">
                <form action="">
                    <div class="zh rg">
                        <div class="inputItem">
                            <input type="tel" id='rgPhone' class="form-control loginput" required pattern="^\d{11}$"
                                placeholder="请输入注册手机号" style='padding-left: 20px;'>
                            <p class='validity'>请输入正确的手机号</p>
                        </div>
                        <div class="inputItem">
                            <input type="text" id='rgYzm' required pattern="^[a-z0-9]{4}$"
                                class="form-control loginput yzminput" placeholder="请输入短信验证码">
                            <a href="" class='getMa'>获取验证码</a>
                            <p class='validity'>请输入正确验证码</p>
                        </div>
                        <div class="inputItem">
                            <input type="password" id='rgPsw' required pattern="(?!^[0-9]+$)(?!^[A-z]+$)^[^\s]{8,20}$"
                                class="form-control loginput yzminput pswInput" placeholder="请输入8-20位字母数字或字符至少包含两种！">
                            <a href="" class='iconfont icon-yanjing-guan getMa see'></a>
                            <p class='validity'>请输入8-20位字母、数字或字符，至少包含两种！</p>
                        </div>
                        <div class="inputItem autoLG">
                            <label for="autoLogin" class='autoLogin'>
                                <input type="checkbox" name="" class="autoLogin1">同意慕课网<a href=""
                                    class='Rxieyi'>《慕课网注册协议》</a><a href="">&</a><a class='Rxieyi'>《隐私政策》</a></label>
                        </div>
                        <div class="inputItem">
                            <input type="submit" value="登录" id='loginBtn3' class='loginBtn' />
                        </div>
                    </div>

                </form>

                <div class="loginfooter">
                    <a class="quickLg">
                        快速注册
                    </a>
                    <span>
                        其他方式登录
                    </span>
                    <div class="lgmd">
                        <a href="" class='iconfont icon-weibo'></a>
                        <a href="" class='iconfont icon-weixin'></a>
                        <a href="" class="iconfont icon-qq"></a>
                    </div>

                    <div class="erweima"></div>
                </div>
            </div>
        </div>
    </div>

    <header>
        <nav class="navbar navbar-default">
            <div class="container1">
                <div>
                    <div class="logo">
                        <a class="navbar-brand" href="#">
                            <img alt="Brand" src="./img/logo.png">
                        </a>
                    </div>
                    <ul class="nav1">
                        <li><a href="">免费课</a></li>
                        <li><a href="">实战课</a></li>
                        <li><a href="">体系课</a></li>
                        <li><a href="">慕课教程</a></li>
                        <li><a href="">专栏</a></li>
                        <li><a href="">手记</a></li>
                    </ul>
                    <div class="search">
                        <input type="text" name="" id="" placeholder="请输入关键字..." class="form-control">
                        <div class="btndv">
                            <a href="">Vue</a>
                            <a href="">Python</a>
                            <div class="btn">
                                <a href=""><i class="glyphicon glyphicon-search"></i>
                                </a>
                            </div>

                        </div>

                    </div>
                    <ul class="nav1 nav2">
                        <li class="collection">
                            <a href="">收藏网站</a>
                            <p class="tips">使用<span>Ctrl+D</span>可将网站添加到书签</p>
                        </li>
                        <li class="cart-li"><a href="./shoppingCart.html" class="
                        glyphicon glyphicon-shopping-cart"></a>
                            <div class="cart-box">
                                <div class="topContent">
                                    <span class='cart-title'>我的购物车</span>
                                    <span class='joinNum'>已加入0门课程</span>
                                </div>
                                <div class="cart-content">
                                    <div class="glyphicon glyphicon-shopping-cart"></div>
                                    <p>购物车里空空如也</p>
                                    <p class='pick'>快去这里选择你中意的课程</p>
                                    <a href="" class='ke'>实战课</a>
                                    <a href="" class='ke'>体系课</a>
                                </div>
                                <div class="cart-bottom">
                                    <a class='Mycenter'>我的订单中心</a>
                                    <a href="" class='goCart'>去购物车</a>
                        </li>
                        <li class='noLogin'>
                            <a href="" class='login'>
                                登录
                            </a>
                        </li>
                        <span class='xiegang noLogin'>/</span>
                        <li class='noLogin'>
                            <a href="" id='register'>注册</a>
                        </li>

                        <!-- 登录后 -->
                        <li class='already'><a href="" class="glyphicon glyphicon-bell bell"></a></li>
                        <li class='already'><a href="" class='course'>我的课程</a></li>
                        <li class="astar already"><a href="">
                                <img src="./img/astar.jpg" alt="">
                            </a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>

    <main>
        <div class="banner-box">
            <!-- 轮播图 -->
            <div class="bgImg">
                <div class="imgBox">
                    <a href=""></a>
                </div>
                <div class="imgBox">
                    <a href=""></a>
                </div>
                <div class="imgBox">
                    <a href=""></a>
                </div>
                <div class="imgBox">
                    <a href=""></a>
                </div>
                <div class="imgBox">
                    <a href=""></a>
                </div>
                <div class="imgBox">
                    <a href=""></a>
                </div>
            </div>
            <!-- 分类 -->
            <div class="inner-box">
                <div class="leftMenu">
                    <ul class='leftMenuUl'>
                        <li><span>前端开发:</span>
                            <span> HTML5 / Vue.js / Node.js</span>
                            <i></i>
                            <div class="contentBox">
                                <div class="topTag">
                                    <h5>前端开发</h5>
                                    <div class="tags">
                                        <span>知识点：</span>
                                        <div class="adiv">
                                            <a href="">Vue.js</a><a href="">Typescript</a><a href="">ReactJS</a><a
                                                href="">HTML/CSS</a><a href="">JavaScript</a><a href="">Angular</a><a
                                                href="">Node.js</a><a href="">jQuery</a><a href="">Bootstrap</a><a
                                                href="">Sass/Less</a><a href="">WebApp</a><a href="">小程序</a><a
                                                href="">前端工具</a><a href="">CSS</a><a href="">Html5</a><a
                                                href="">CSS3</a>
                                        </div>

                                    </div>
                                </div>
                                <div class="bottomDiv">
                                    <div class="courseItem">
                                        <a href="">
                                            <div class="coursePic">
                                                <img src="./img/tag1.png" alt="">
                                            </div>
                                            <div class="courseInfo">
                                                <p>
                                                    <span class='courseName'>前端工程师</span>
                                                    <span class='courseTag hong'>体系</span>
                                                </p>
                                                <p>
                                                    <span class='courseTag hong'>优惠价</span>
                                                    <span class='coursePrice'>￥3999.00</span>
                                                    <span class='gray'>· 零基础 ·</span>
                                                    <span class='gray glyphicon glyphicon-user'>18870</span>
                                                </p>

                                            </div>
                                        </a>

                                    </div>
                                    <div class="courseItem">
                                        <a href="">
                                            <div class="coursePic">
                                                <img src="./img/tag2.png" alt="">
                                            </div>
                                            <div class="courseInfo">
                                                <p>
                                                    <span class='courseName'>Vue3.0(正式版) + TS 仿知乎专题</span>
                                                    <span class='courseTag cheng'>实战</span>
                                                </p>
                                                <p>
                                                    <span class='coursePrice'>348.00</span>
                                                    <span class='gray'>· 中级 ·</span>
                                                    <span class='gray glyphicon glyphicon-user'>1448</span>
                                                </p>

                                            </div>
                                        </a>

                                    </div>
                                    <div class="courseItem">
                                        <a href="">
                                            <div class="coursePic">
                                                <img src="./img/tag3.jpg" alt="">
                                            </div>
                                            <div class="courseInfo">
                                                <p>
                                                    <span class='courseName'>前端框架及项目面试 聚焦Vue3/React/Webpack</span>
                                                    <span class='courseTag cheng'>实战</span>
                                                </p>
                                                <p>
                                                    <span class='coursePrice'>399.00</span>
                                                    <span class='gray'>· 中级 ·</span>
                                                    <span class='gray glyphicon glyphicon-user'>2523</span>
                                                </p>

                                            </div>
                                        </a>

                                    </div>
                                    <div class="courseItem">
                                        <a href="">
                                            <div class="coursePic">
                                                <img src="./img/tag4.png" alt="">
                                            </div>
                                            <div class="courseInfo">
                                                <p>
                                                    <span class='courseName'>Vue.js从入门到精通</span>
                                                    <span class='courseTag lan'>路线</span>
                                                </p>
                                                <p>
                                                    <span class='gray'>4步骤</span>
                                                    <span class='gray'>· 4门课 ·</span>
                                                    <span class='gray glyphicon glyphicon-user'>19599人收藏</span>
                                                </p>

                                            </div>
                                        </a>

                                    </div>
                                </div>
                            </div>
                        </li>
                        <li><span>后端开发:</span>
                            <span> Java / Python / Go</span>
                            <i></i>
                            <div class="contentBox">
                                <div class="topTag">
                                    <h5>后端开发</h5>
                                    <div class="tags">
                                        <span>知识点：</span>
                                        <div class="adiv">
                                            <a href="">Java</a>
                                            <a href="">SpringBoot</a>
                                            <a href="">Spring Cloud</a>
                                            <a href="">SSM</a>
                                            <a href="">PHP</a>
                                            <a href="">PHP</a>
                                            <a href="">.net</a>
                                            <a href="">Python爬虫</a>
                                            <a href="">Django</a>
                                            <a href="">Flask</a>
                                            <a href="">Tornado</a>
                                            <a href="">Go</a>
                                            <a href="">CC#</a>
                                            <a href="">C++</a>
                                            <a href="">Ruby</a>
                                        </div>

                                    </div>
                                </div>
                                <div class="bottomDiv">
                                    <div class="courseItem">
                                        <a href="">
                                            <div class="coursePic">
                                                <img src="./img/tag1.png" alt="">
                                            </div>
                                            <div class="courseInfo">
                                                <p>
                                                    <span class='courseName'>前端工程师</span>
                                                    <span class='courseTag hong'>体系</span>
                                                </p>
                                                <p>
                                                    <span class='courseTag hong'>优惠价</span>
                                                    <span class='coursePrice'>￥3999.00</span>
                                                    <span class='gray'>· 零基础 ·</span>
                                                    <span class='gray glyphicon glyphicon-user'>18870</span>
                                                </p>

                                            </div>
                                        </a>

                                    </div>
                                    <div class="courseItem">
                                        <a href="">
                                            <div class="coursePic">
                                                <img src="./img/tag2.png" alt="">
                                            </div>
                                            <div class="courseInfo">
                                                <p>
                                                    <span class='courseName'>Vue3.0(正式版) + TS 仿知乎专题</span>
                                                    <span class='courseTag cheng'>实战</span>
                                                </p>
                                                <p>
                                                    <span class='coursePrice'>348.00</span>
                                                    <span class='gray'>· 中级 ·</span>
                                                    <span class='gray glyphicon glyphicon-user'>1448</span>
                                                </p>

                                            </div>
                                        </a>

                                    </div>
                                    <div class="courseItem">
                                        <a href="">
                                            <div class="coursePic">
                                                <img src="./img/tag3.jpg" alt="">
                                            </div>
                                            <div class="courseInfo">
                                                <p>
                                                    <span class='courseName'>前端框架及项目面试 聚焦Vue3/React/Webpack</span>
                                                    <span class='courseTag cheng'>实战</span>
                                                </p>
                                                <p>
                                                    <span class='coursePrice'>399.00</span>
                                                    <span class='gray'>· 中级 ·</span>
                                                    <span class='gray glyphicon glyphicon-user'>2523</span>
                                                </p>

                                            </div>
                                        </a>

                                    </div>
                                    <div class="courseItem">
                                        <a href="">
                                            <div class="coursePic">
                                                <img src="./img/tag4.png" alt="">
                                            </div>
                                            <div class="courseInfo">
                                                <p>
                                                    <span class='courseName'>Vue.js从入门到精通</span>
                                                    <span class='courseTag lan'>路线</span>
                                                </p>
                                                <p>
                                                    <span class='gray'>4步骤</span>
                                                    <span class='gray'>· 4门课 ·</span>
                                                    <span class='gray glyphicon glyphicon-user'>19599人收藏</span>
                                                </p>

                                            </div>
                                        </a>

                                    </div>
                                </div>
                            </div>
                        </li>
                        <li><span>移动开发:</span>
                            <span> Flutter / Android / iOS</span>
                            <i></i>
                            <div class="contentBox">
                                <div class="topTag">
                                    <h5>移动开发</h5>
                                    <div class="tags">
                                        <span>知识点：</span>
                                        <div class="adiv">
                                            <a href="">Vue.js</a><a href="">Typescript</a><a href="">ReactJS</a><a
                                                href="">HTML/CSS</a><a href="">JavaScript</a><a href="">Angular</a><a
                                                href="">Node.js</a><a href="">jQuery</a><a href="">Bootstrap</a><a
                                                href="">Sass/Less</a><a href="">WebApp</a><a href="">小程序</a><a
                                                href="">前端工具</a><a href="">CSS</a><a href="">Html5</a><a
                                                href="">CSS3</a>
                                        </div>

                                    </div>
                                </div>
                                <div class="bottomDiv">
                                    <div class="courseItem">
                                        <a href="">
                                            <div class="coursePic">
                                                <img src="./img/tag1.png" alt="">
                                            </div>
                                            <div class="courseInfo">
                                                <p>
                                                    <span class='courseName'>前端工程师</span>
                                                    <span class='courseTag hong'>体系</span>
                                                </p>
                                                <p>
                                                    <span class='courseTag hong'>优惠价</span>
                                                    <span class='coursePrice'>￥3999.00</span>
                                                    <span class='gray'>· 零基础 ·</span>
                                                    <span class='gray glyphicon glyphicon-user'>18870</span>
                                                </p>

                                            </div>
                                        </a>

                                    </div>
                                    <div class="courseItem">
                                        <a href="">
                                            <div class="coursePic">
                                                <img src="./img/tag2.png" alt="">
                                            </div>
                                            <div class="courseInfo">
                                                <p>
                                                    <span class='courseName'>Vue3.0(正式版) + TS 仿知乎专题</span>
                                                    <span class='courseTag cheng'>实战</span>
                                                </p>
                                                <p>
                                                    <span class='coursePrice'>348.00</span>
                                                    <span class='gray'>· 中级 ·</span>
                                                    <span class='gray glyphicon glyphicon-user'>1448</span>
                                                </p>

                                            </div>
                                        </a>

                                    </div>
                                    <div class="courseItem">
                                        <a href="">
                                            <div class="coursePic">
                                                <img src="./img/tag3.jpg" alt="">
                                            </div>
                                            <div class="courseInfo">
                                                <p>
                                                    <span class='courseName'>前端框架及项目面试 聚焦Vue3/React/Webpack</span>
                                                    <span class='courseTag cheng'>实战</span>
                                                </p>
                                                <p>
                                                    <span class='coursePrice'>399.00</span>
                                                    <span class='gray'>· 中级 ·</span>
                                                    <span class='gray glyphicon glyphicon-user'>2523</span>
                                                </p>

                                            </div>
                                        </a>

                                    </div>
                                    <div class="courseItem">
                                        <a href="">
                                            <div class="coursePic">
                                                <img src="./img/tag4.png" alt="">
                                            </div>
                                            <div class="courseInfo">
                                                <p>
                                                    <span class='courseName'>Vue.js从入门到精通</span>
                                                    <span class='courseTag lan'>路线</span>
                                                </p>
                                                <p>
                                                    <span class='gray'>4步骤</span>
                                                    <span class='gray'>· 4门课 ·</span>
                                                    <span class='gray glyphicon glyphicon-user'>19599人收藏</span>
                                                </p>

                                            </div>
                                        </a>

                                    </div>
                                </div>
                            </div>
                        </li>
                        <li><span>计算机基础:</span>
                            <span> 算法 / 数学 / 数据库</span>
                            <i></i>
                            <div class="contentBox">
                                <div class="topTag">
                                    <h5>计算机基础</h5>
                                    <div class="tags">
                                        <span>知识点：</span>
                                        <div class="adiv">
                                            <a href="">Vue.js</a><a href="">Typescript</a><a href="">ReactJS</a><a
                                                href="">HTML/CSS</a><a href="">JavaScript</a><a href="">Angular</a><a
                                                href="">Node.js</a><a href="">jQuery</a><a href="">Bootstrap</a><a
                                                href="">Sass/Less</a><a href="">WebApp</a><a href="">小程序</a><a
                                                href="">前端工具</a><a href="">CSS</a><a href="">Html5</a><a
                                                href="">CSS3</a>
                                        </div>

                                    </div>
                                </div>
                                <div class="bottomDiv">
                                    <div class="courseItem">
                                        <a href="">
                                            <div class="coursePic">
                                                <img src="./img/tag1.png" alt="">
                                            </div>
                                            <div class="courseInfo">
                                                <p>
                                                    <span class='courseName'>前端工程师</span>
                                                    <span class='courseTag hong'>体系</span>
                                                </p>
                                                <p>
                                                    <span class='courseTag hong'>优惠价</span>
                                                    <span class='coursePrice'>￥3999.00</span>
                                                    <span class='gray'>· 零基础 ·</span>
                                                    <span class='gray glyphicon glyphicon-user'>18870</span>
                                                </p>

                                            </div>
                                        </a>

                                    </div>
                                    <div class="courseItem">
                                        <a href="">
                                            <div class="coursePic">
                                                <img src="./img/tag2.png" alt="">
                                            </div>
                                            <div class="courseInfo">
                                                <p>
                                                    <span class='courseName'>Vue3.0(正式版) + TS 仿知乎专题</span>
                                                    <span class='courseTag cheng'>实战</span>
                                                </p>
                                                <p>
                                                    <span class='coursePrice'>348.00</span>
                                                    <span class='gray'>· 中级 ·</span>
                                                    <span class='gray glyphicon glyphicon-user'>1448</span>
                                                </p>

                                            </div>
                                        </a>

                                    </div>
                                    <div class="courseItem">
                                        <a href="">
                                            <div class="coursePic">
                                                <img src="./img/tag3.jpg" alt="">
                                            </div>
                                            <div class="courseInfo">
                                                <p>
                                                    <span class='courseName'>前端框架及项目面试 聚焦Vue3/React/Webpack</span>
                                                    <span class='courseTag cheng'>实战</span>
                                                </p>
                                                <p>
                                                    <span class='coursePrice'>399.00</span>
                                                    <span class='gray'>· 中级 ·</span>
                                                    <span class='gray glyphicon glyphicon-user'>2523</span>
                                                </p>

                                            </div>
                                        </a>

                                    </div>
                                    <div class="courseItem">
                                        <a href="">
                                            <div class="coursePic">
                                                <img src="./img/tag4.png" alt="">
                                            </div>
                                            <div class="courseInfo">
                                                <p>
                                                    <span class='courseName'>Vue.js从入门到精通</span>
                                                    <span class='courseTag lan'>路线</span>
                                                </p>
                                                <p>
                                                    <span class='gray'>4步骤</span>
                                                    <span class='gray'>· 4门课 ·</span>
                                                    <span class='gray glyphicon glyphicon-user'>19599人收藏</span>
                                                </p>

                                            </div>
                                        </a>

                                    </div>
                                </div>
                            </div>
                        </li>
                        <li><span>前沿技术：</span>
                            <span> AI / 大数据 / 数据分析</span>
                            <i></i>
                            <div class="contentBox">
                                <div class="topTag">
                                    <h5>前沿技术：</h5>
                                    <div class="tags">
                                        <span>知识点：</span>
                                        <div class="adiv">
                                            <a href="">Vue.js</a><a href="">Typescript</a><a href="">ReactJS</a><a
                                                href="">HTML/CSS</a><a href="">JavaScript</a><a href="">Angular</a><a
                                                href="">Node.js</a><a href="">jQuery</a><a href="">Bootstrap</a><a
                                                href="">Sass/Less</a><a href="">WebApp</a><a href="">小程序</a><a
                                                href="">前端工具</a><a href="">CSS</a><a href="">Html5</a><a
                                                href="">CSS3</a>
                                        </div>

                                    </div>
                                </div>
                                <div class="bottomDiv">
                                    <div class="courseItem">
                                        <a href="">
                                            <div class="coursePic">
                                                <img src="./img/tag1.png" alt="">
                                            </div>
                                            <div class="courseInfo">
                                                <p>
                                                    <span class='courseName'>前端工程师</span>
                                                    <span class='courseTag hong'>体系</span>
                                                </p>
                                                <p>
                                                    <span class='courseTag hong'>优惠价</span>
                                                    <span class='coursePrice'>￥3999.00</span>
                                                    <span class='gray'>· 零基础 ·</span>
                                                    <span class='gray glyphicon glyphicon-user'>18870</span>
                                                </p>

                                            </div>
                                        </a>

                                    </div>
                                    <div class="courseItem">
                                        <a href="">
                                            <div class="coursePic">
                                                <img src="./img/tag2.png" alt="">
                                            </div>
                                            <div class="courseInfo">
                                                <p>
                                                    <span class='courseName'>Vue3.0(正式版) + TS 仿知乎专题</span>
                                                    <span class='courseTag cheng'>实战</span>
                                                </p>
                                                <p>
                                                    <span class='coursePrice'>348.00</span>
                                                    <span class='gray'>· 中级 ·</span>
                                                    <span class='gray glyphicon glyphicon-user'>1448</span>
                                                </p>

                                            </div>
                                        </a>

                                    </div>
                                    <div class="courseItem">
                                        <a href="">
                                            <div class="coursePic">
                                                <img src="./img/tag3.jpg" alt="">
                                            </div>
                                            <div class="courseInfo">
                                                <p>
                                                    <span class='courseName'>前端框架及项目面试 聚焦Vue3/React/Webpack</span>
                                                    <span class='courseTag cheng'>实战</span>
                                                </p>
                                                <p>
                                                    <span class='coursePrice'>399.00</span>
                                                    <span class='gray'>· 中级 ·</span>
                                                    <span class='gray glyphicon glyphicon-user'>2523</span>
                                                </p>

                                            </div>
                                        </a>

                                    </div>
                                    <div class="courseItem">
                                        <a href="">
                                            <div class="coursePic">
                                                <img src="./img/tag4.png" alt="">
                                            </div>
                                            <div class="courseInfo">
                                                <p>
                                                    <span class='courseName'>Vue.js从入门到精通</span>
                                                    <span class='courseTag lan'>路线</span>
                                                </p>
                                                <p>
                                                    <span class='gray'>4步骤</span>
                                                    <span class='gray'>· 4门课 ·</span>
                                                    <span class='gray glyphicon glyphicon-user'>19599人收藏</span>
                                                </p>

                                            </div>
                                        </a>

                                    </div>
                                </div>
                            </div>
                        </li>
                        <li><span>测试运维：</span>
                            <span> 自动化测试 / 容器</span>
                            <i></i>
                            <div class="contentBox">
                                <div class="topTag">
                                    <h5>测试运维：</h5>
                                    <div class="tags">
                                        <span>知识点：</span>
                                        <div class="adiv">
                                            <a href="">Vue.js</a><a href="">Typescript</a><a href="">ReactJS</a><a
                                                href="">HTML/CSS</a><a href="">JavaScript</a><a href="">Angular</a><a
                                                href="">Node.js</a><a href="">jQuery</a><a href="">Bootstrap</a><a
                                                href="">Sass/Less</a><a href="">WebApp</a><a href="">小程序</a><a
                                                href="">前端工具</a><a href="">CSS</a><a href="">Html5</a><a
                                                href="">CSS3</a>
                                        </div>

                                    </div>
                                </div>
                                <div class="bottomDiv">
                                    <div class="courseItem">
                                        <a href="">
                                            <div class="coursePic">
                                                <img src="./img/tag1.png" alt="">
                                            </div>
                                            <div class="courseInfo">
                                                <p>
                                                    <span class='courseName'>前端工程师</span>
                                                    <span class='courseTag hong'>体系</span>
                                                </p>
                                                <p>
                                                    <span class='courseTag hong'>优惠价</span>
                                                    <span class='coursePrice'>￥3999.00</span>
                                                    <span class='gray'>· 零基础 ·</span>
                                                    <span class='gray glyphicon glyphicon-user'>18870</span>
                                                </p>

                                            </div>
                                        </a>

                                    </div>
                                    <div class="courseItem">
                                        <a href="">
                                            <div class="coursePic">
                                                <img src="./img/tag2.png" alt="">
                                            </div>
                                            <div class="courseInfo">
                                                <p>
                                                    <span class='courseName'>Vue3.0(正式版) + TS 仿知乎专题</span>
                                                    <span class='courseTag cheng'>实战</span>
                                                </p>
                                                <p>
                                                    <span class='coursePrice'>348.00</span>
                                                    <span class='gray'>· 中级 ·</span>
                                                    <span class='gray glyphicon glyphicon-user'>1448</span>
                                                </p>

                                            </div>
                                        </a>

                                    </div>
                                    <div class="courseItem">
                                        <a href="">
                                            <div class="coursePic">
                                                <img src="./img/tag3.jpg" alt="">
                                            </div>
                                            <div class="courseInfo">
                                                <p>
                                                    <span class='courseName'>前端框架及项目面试 聚焦Vue3/React/Webpack</span>
                                                    <span class='courseTag cheng'>实战</span>
                                                </p>
                                                <p>
                                                    <span class='coursePrice'>399.00</span>
                                                    <span class='gray'>· 中级 ·</span>
                                                    <span class='gray glyphicon glyphicon-user'>2523</span>
                                                </p>

                                            </div>
                                        </a>

                                    </div>
                                    <div class="courseItem">
                                        <a href="">
                                            <div class="coursePic">
                                                <img src="./img/tag4.png" alt="">
                                            </div>
                                            <div class="courseInfo">
                                                <p>
                                                    <span class='courseName'>Vue.js从入门到精通</span>
                                                    <span class='courseTag lan'>路线</span>
                                                </p>
                                                <p>
                                                    <span class='gray'>4步骤</span>
                                                    <span class='gray'>· 4门课 ·</span>
                                                    <span class='gray glyphicon glyphicon-user'>19599人收藏</span>
                                                </p>

                                            </div>
                                        </a>

                                    </div>
                                </div>
                            </div>
                        </li>
                        <li><span>更多方向：</span>
                            <span> 产品设计 / UI设计 / 游戏</span>
                            <i></i>
                            <div class="contentBox">
                                <div class="topTag">
                                    <h5>更多方向：</h5>
                                    <div class="tags">
                                        <span>知识点：</span>
                                        <div class="adiv">
                                            <a href="">Vue.js</a><a href="">Typescript</a><a href="">ReactJS</a><a
                                                href="">HTML/CSS</a><a href="">JavaScript</a><a href="">Angular</a><a
                                                href="">Node.js</a><a href="">jQuery</a><a href="">Bootstrap</a><a
                                                href="">Sass/Less</a><a href="">WebApp</a><a href="">小程序</a><a
                                                href="">前端工具</a><a href="">CSS</a><a href="">Html5</a><a
                                                href="">CSS3</a>
                                        </div>

                                    </div>
                                </div>
                                <div class="bottomDiv">
                                    <div class="courseItem">
                                        <a href="">
                                            <div class="coursePic">
                                                <img src="./img/tag1.png" alt="">
                                            </div>
                                            <div class="courseInfo">
                                                <p>
                                                    <span class='courseName'>前端工程师</span>
                                                    <span class='courseTag hong'>体系</span>
                                                </p>
                                                <p>
                                                    <span class='courseTag hong'>优惠价</span>
                                                    <span class='coursePrice'>￥3999.00</span>
                                                    <span class='gray'>· 零基础 ·</span>
                                                    <span class='gray glyphicon glyphicon-user'>18870</span>
                                                </p>

                                            </div>
                                        </a>

                                    </div>
                                    <div class="courseItem">
                                        <a href="">
                                            <div class="coursePic">
                                                <img src="./img/tag2.png" alt="">
                                            </div>
                                            <div class="courseInfo">
                                                <p>
                                                    <span class='courseName'>Vue3.0(正式版) + TS 仿知乎专题</span>
                                                    <span class='courseTag cheng'>实战</span>
                                                </p>
                                                <p>
                                                    <span class='coursePrice'>348.00</span>
                                                    <span class='gray'>· 中级 ·</span>
                                                    <span class='gray glyphicon glyphicon-user'>1448</span>
                                                </p>

                                            </div>
                                        </a>

                                    </div>
                                    <div class="courseItem">
                                        <a href="">
                                            <div class="coursePic">
                                                <img src="./img/tag3.jpg" alt="">
                                            </div>
                                            <div class="courseInfo">
                                                <p>
                                                    <span class='courseName'>前端框架及项目面试 聚焦Vue3/React/Webpack</span>
                                                    <span class='courseTag cheng'>实战</span>
                                                </p>
                                                <p>
                                                    <span class='coursePrice'>399.00</span>
                                                    <span class='gray'>· 中级 ·</span>
                                                    <span class='gray glyphicon glyphicon-user'>2523</span>
                                                </p>

                                            </div>
                                        </a>

                                    </div>
                                    <div class="courseItem">
                                        <a href="">
                                            <div class="coursePic">
                                                <img src="./img/tag4.png" alt="">
                                            </div>
                                            <div class="courseInfo">
                                                <p>
                                                    <span class='courseName'>Vue.js从入门到精通</span>
                                                    <span class='courseTag lan'>路线</span>
                                                </p>
                                                <p>
                                                    <span class='gray'>4步骤</span>
                                                    <span class='gray'>· 4门课 ·</span>
                                                    <span class='gray glyphicon glyphicon-user'>19599人收藏</span>
                                                </p>

                                            </div>
                                        </a>

                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="rightImg">
                    <div class="bgImg1">
                        <div class="imgBox1">
                            <a href=""></a>
                        </div>
                        <div class="imgBox1">
                            <a href=""></a>
                        </div>
                        <div class="imgBox1">
                            <a href=""></a>
                        </div>
                        <div class="imgBox1">
                            <a href=""></a>
                        </div>
                        <div class="imgBox1">
                            <a href=""></a>
                        </div>
                        <div class="imgBox1">
                            <a href=""></a>
                        </div>
                    </div>
                    <div class="bottomDot">
                        <ul class="dotList">
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                    <div class="leftBtn glyphicon glyphicon-menu-left"></div>
                    <div class="rightBtn glyphicon glyphicon-menu-right"></div>
                </div>
            </div>
            <div class="jobCourse">
                <a href="" class='jobs'>
                    <img src="./img/jobCourse1.jpg" alt="">
                    <div>
                        <h5>Java工程师</h5>
                        <p>综合就业率第一</p>
                    </div>
                </a>
                <a href="" class='jobs'>
                    <img src="./img/jobCourse2.jpg" alt="">
                    <div>
                        <h5>前端工程师</h5>
                        <p>入门快、就业快、岗位多</p>
                    </div>
                </a>
                <a href="" class='jobs'>
                    <img src="./img/jobCourse3.jpg" alt="">
                    <div>
                        <h5>Python工程师</h5>
                        <p>应用领域最广泛</p>
                    </div>
                </a>
                <a href="" class='jobs'>
                    <img src="./img/jobCourse4.jpg" alt="">
                    <div>
                        <h5>Web前端架构师</h5>
                        <p>培养前端P7级架构师</p>
                    </div>
                </a>
                <a href="" class='jobs'>
                    <img src="./img/jobCourse5.jpg" alt="">
                    <div>
                        <h5>Java架构师P7</h5>
                        <p>千万级电商架构0-100</p>
                    </div>
                </a>
                <div class='shuxian'></div>
                <a href="" class='jobs more'>
                    <div>
                        <h5>体系课</h5>
                        <p>more&gt;</p>
                    </div>
                </a>
            </div>
        </div>
    </main>
    <!-- 新上好课 -->
    <div class="bgNew">
        <div class="newCourse" id='newCourse'>
            <div class="courseNav" id='courseNav'>
                <img src="./img/title-bg3.png" alt="">
                <ul>
                    <li><a href="" class='activeNewCourse'>推荐</a></li>
                    <li><a href="">前端开发</a></li>
                    <li><a href="">后端开发</a></li>
                    <li><a href="">精品免费</a></li>
                </ul>
            </div>
            <div class="newCourseItems">
                <div class="allItems">
                    <div class="newItem newTag">
                        <a href="">
                            <div class="newCImg">
                                <img src="./img/q2.png" alt="">
                            </div>
                            <div class="newCInfo">
                                <p class='Intr'>Vue3+ElementPlus+Koa2 全栈开发后台系统</p>
                                <p class='grade'>中级 · 224报名</p>
                                <p class='qian'><span class='clock'>限时优惠</span>
                                    <span class='nowPrice'>￥328.00</span>
                                    <span class='originPrice'>
                                        ￥368.00
                                    </span>
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="newItem shengJiTag">
                        <a href="">
                            <div class="newCImg">
                                <img src="./img/a5.png" alt="">
                            </div>
                            <div class="newCInfo">
                                <p class='Intr'>全面系统Python3.8入门+进阶 (程序员必备第二语言)</p>
                                <p class='grade'>初级 · 12595人报名</p>
                                <p class='qian'>
                                    <span class='nowPrice'>￥366.00</span>
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="newItem shengJiTag">
                        <a href="">
                            <div class="newCImg">
                                <img src="./img/a2.png" alt="">
                            </div>
                            <div class="newCInfo">
                                <p class='Intr'>一天时间迅速准备前端面试 快速构建初级前端知识体系</p>
                                <p class='grade'>初级 · 2912人报名</p>
                                <p class='qian'>
                                    <span class='nowPrice'>￥299.00</span>
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="newItem">
                        <a href="">
                            <div class="newCImg">
                                <img src="./img/a4.png" alt="">
                            </div>
                            <div class="newCInfo">
                                <p class='Intr'>Vue3.0(正式版) + TS 仿知乎专栏企业级项目 深度剖析Vue3新特性</p>
                                <p class='grade'>中级 · 1508人报名</p>
                                <p class='qian'>
                                    <span class='nowPrice'>￥348.00</span>
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="newItem newTag">
                        <a href="">
                            <div class="newCImg">
                                <img src="./img/new1.png" alt="">
                            </div>
                            <div class="newCInfo">
                                <p class='Intr'>Java异常与调优一站式解决方案</p>
                                <p class='grade'>初级 · 90人报名</p>
                                <p class='qian'><span class='clock'>限时优惠</span>
                                    <span class='nowPrice'>￥228.00</span>
                                    <span class='originPrice'>
                                        ￥268.00
                                    </span>
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="newItem">
                        <a href="">
                            <div class="newCImg">
                                <img src="./img/new2.png" alt="">
                            </div>
                            <div class="newCInfo">
                                <p class='Intr'>2021必修 首门CSS架构系统精讲 理论+实战玩转蘑菇街</p>
                                <p class='grade'>中级 · 237人报名</p>
                                <p class='qian'>
                                    <span class='nowPrice'>￥288.00</span>
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="newItem shengJiTag">
                        <a href="">
                            <div class="newCImg">
                                <img src="./img/new3.png" alt="">
                            </div>
                            <div class="newCInfo">
                                <p class='Intr'>前端框架及项目面试 聚焦Vue3/React/Webpack</p>
                                <p class='grade'>中级 · 2529人报名</p>
                                <p class='qian'>
                                    <span class='nowPrice'>￥399.00</span>
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="newItem">
                        <a href="">
                            <div class="newCImg">
                                <img src="./img/new4.png" alt="">
                            </div>
                            <div class="newCInfo">
                                <p class='Intr'>2021必修 React17+React Hook+TS4 最佳实践，仿 Jira 企业级项目</p>
                                <p class='grade'>高级 · 796人报名</p>
                                <p class='qian'>
                                    <span class='nowPrice'>￥368.00</span>
                                </p>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="someItems">
                    <div class="newItem newTag">
                        <a href="">
                            <div class="newCImg">
                                <img src="./img/q1.png" alt="">
                            </div>
                            <div class="newCInfo">
                                <p class='Intr'>Vue3开发企业级音乐Web App 明星讲师带你学习大厂高质量代码</p>
                                <p class='grade'>高级 · 1430人报名</p>
                                <p class='qian'>
                                    <span class='nowPrice'>￥448.00</span>
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="newItem newTag">
                        <a href="">
                            <div class="newCImg">
                                <img src="./img/q2.png" alt="">
                            </div>
                            <div class="newCInfo">
                                <p class='Intr'>Vue3+ElementPlus+Koa2 全栈开发后台系统</p>
                                <p class='grade'>中级 · 224报名</p>
                                <p class='qian'><span class='clock'>限时优惠</span>
                                    <span class='nowPrice'>￥328.00</span>
                                    <span class='originPrice'>
                                        ￥368.00
                                    </span>
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="newItem">
                        <a href="">
                            <div class="newCImg">
                                <img src="./img/new2.png" alt="">
                            </div>
                            <div class="newCInfo">
                                <p class='Intr'>2021必修 首门CSS架构系统精讲 理论+实战玩转蘑菇街</p>
                                <p class='grade'>中级 · 237人报名</p>
                                <p class='qian'>
                                    <span class='nowPrice'>￥288.00</span>
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="newItem shengJiTag">
                        <a href="">
                            <div class="newCImg">
                                <img src="./img/new3.png" alt="">
                            </div>
                            <div class="newCInfo">
                                <p class='Intr'>前端框架及项目面试 聚焦Vue3/React/Webpack</p>
                                <p class='grade'>中级 · 2529人报名</p>
                                <p class='qian'>
                                    <span class='nowPrice'>￥399.00</span>
                                </p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="bgOneTwoThree">
            <!-- 入站必学 -->
            <div class="mustLearn" id='mustLearn'>
                <div class="courseNav">
                    <img src="./img/title-bg4.png" alt="">
                    <ul>
                        <li> <a href="" class='activeNewCourse'>推荐</a></li>
                        <li><a href="">计算基础</a></li>
                        <li><a href="">前端开发</a></li>
                        <li><a href="">后端开发</a></li>
                        <li><a href="">精品免费</a></li>
                    </ul>
                </div>
                <div class="newCourseItems">
                    <div class="newItem shengJiTag">
                        <a href="">
                            <div class="newCImg">
                                <img src="./img/new3.png" alt="">
                            </div>
                            <div class="newCInfo">
                                <p class='Intr'>前端框架及项目面试 聚焦Vue3/React/Webpack</p>
                                <p class='grade'>中级 · 2529人报名</p>
                                <p class='qian'>
                                    <span class='nowPrice'>￥399.00</span>
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="newItem">
                        <a href="">
                            <div class="newCImg">
                                <img src="./img/a1.png" alt="">
                            </div>
                            <div class="newCInfo">
                                <p class='Intr'>想学C++不用翻教材 百度大牛带你结合实践重学C++</p>
                                <p class='grade'>中级 · 2103人报名</p>
                                <p class='qian'>
                                    <span class='nowPrice'>￥448.00</span>
                                </p>
                            </div>
                        </a>
                    </div>

                    <div class="newItem shengJiTag">
                        <a href="">
                            <div class="newCImg">
                                <img src="./img/a2.png" alt="">
                            </div>
                            <div class="newCInfo">
                                <p class='Intr'>一天时间迅速准备前端面试 快速构建初级前端知识体系</p>
                                <p class='grade'>初级 · 2912人报名</p>
                                <p class='qian'>
                                    <span class='nowPrice'>￥299.00</span>
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="newItem newTag">
                        <a href="">
                            <div class="newCImg">
                                <img src="./img/a3.png" alt="">
                            </div>
                            <div class="newCInfo">
                                <p class='Intr'>Vue3 从入门到实战 进阶式掌握完整知识体系</p>
                                <p class='grade'>中级 · 1077人报名</p>
                                <p class='qian'>
                                    <span class='nowPrice'>￥348.00</span>
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="newItem">
                        <a href="">
                            <div class="newCImg">
                                <img src="./img/a4.png" alt="">
                            </div>
                            <div class="newCInfo">
                                <p class='Intr'>Vue3.0(正式版) + TS 仿知乎专栏企业级项目 深度剖析Vue3新特性</p>
                                <p class='grade'>中级 · 1508人报名</p>
                                <p class='qian'>
                                    <span class='nowPrice'>￥348.00</span>
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="newItem shengJiTag">
                        <a href="">
                            <div class="newCImg">
                                <img src="./img/a5.png" alt="">
                            </div>
                            <div class="newCInfo">
                                <p class='Intr'>全面系统Python3.8入门+进阶 (程序员必备第二语言)</p>
                                <p class='grade'>初级 · 12595人报名</p>
                                <p class='qian'>
                                    <span class='nowPrice'>￥366.00</span>
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="newItem">
                        <a href="">
                            <div class="newCImg">
                                <img src="./img/a6.png" alt="">
                            </div>
                            <div class="newCInfo">
                                <p class='Intr'>首门程序员理财课 Python量化交易系统实战</p>
                                <p class='grade'>入门 · 537人报名</p>
                                <p class='qian'>
                                    <span class='nowPrice'>￥299.00</span>
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="newItem">
                        <a href="">
                            <div class="newCImg">
                                <img src="./img/a7.png" alt="">
                            </div>
                            <div class="newCInfo">
                                <p class='Intr'>Spring Boot + Vue3 前后端分离，实战wiki知识库系统</p>
                                <p class='grade'>初级 · 602人报名</p>
                                <p class='qian'>
                                    <span class='nowPrice'>￥299.00</span>
                                </p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <!-- 学习路线 -->
            <div class="studyLines" id='studyLines'>
                <div class="courseNav">
                    <img src="./img/title-bg9.png" alt="">
                    <ul>
                        <li> <a href="" class='activeNewCourse'>推荐</a></li>
                        <li><a href="">前端开发</a></li>
                        <li><a href="">后端开发</a></li>
                        <li><a href="">移动开发</a></li>
                    </ul>
                </div>
                <div class="studyLineItems">
                    <div class="lineItem">
                        <a href="">
                            <div class="linesImg">
                                <img src="./img/lines1.png" alt="">
                            </div>
                            <div class="lineInfo">
                                <p>路线伴随Web前端工程师一路成长，彻底搞懂不同阶段的面试重点，高效拿下offer。</p>
                                <p>
                                    <span>3步骤 · 4门课</span>
                                    <span>9868收藏</span>
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="lineItem">
                        <a href="">
                            <div class="linesImg">
                                <img src="./img/l2.png" alt="">
                            </div>
                            <div class="lineInfo">
                                <p>对标大厂岗位需求，从音视频基础入门、处理核心技术到服务器设计开发 ，全面培养5G时代人才。</p>
                                <p>
                                    <span>4步骤 · 4门课</span>
                                    <span>793收藏</span>
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="lineItem">
                        <a href="">
                            <div class="linesImg">
                                <img src="./img/l3.png" alt="">
                            </div>
                            <div class="lineInfo">
                                <p>路线面向0基础用户，从最基础的开发语言Python学起，带你进入人工智能的世界。</p>
                                <p>
                                    <span>6步骤 · 7门课</span>
                                    <span>15140收藏</span>
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="lineItem">
                        <a href="">
                            <div class="linesImg">
                                <img src="./img/l4.png" alt="">
                            </div>
                            <div class="lineInfo">
                                <p>路线吃透面试学问，伴随身为Java工程师的你一路成长，高效充分准备面试拿offer。</p>
                                <p>
                                    <span>3步骤 · 3门课</span>
                                    <span>10828收藏</span>
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="lineItem">
                        <a href="">
                            <div class="linesImg">
                                <img src="./img/l5.png" alt="">
                            </div>
                            <div class="lineInfo">
                                <p>本路线旨在帮助想快速掌握SpringBoot应用的工程师，全方位多角度带你升级。</p>
                                <p>
                                    <span>3步骤 · 5门课</span>
                                    <span>11041收藏</span>
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="lineItem">
                        <a href="">
                            <div class="linesImg">
                                <img src="./img/l6.png" alt="">
                            </div>
                            <div class="lineInfo">
                                <p>一举吃透最耗时的数据库，学会数据库的基本使用、业务库的设计与架构，面试收尾升华所学。</p>
                                <p>
                                    <span>4步骤 · 4门课</span>
                                    <span>5617收藏</span>
                                </p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <!-- 慕课专栏 -->
            <div class="moocColumns" id='moocColumns'>
                <div class='zhuanlan'>
                    <img src="./img/title-bg5.png" alt="">
                    <a href="" class='allColumns'>全部 <i class="glyphicon glyphicon-menu-right"></i></a>
                </div>
                <div class="zhuanlanItems">
                    <div class="zhuanlanItem">
                        <a href="">
                            <div class="bookImg">
                                <img src="./img/book1.jpg" alt="">
                            </div>
                            <div class="bookInfo">
                                <p>解锁前端面试体系核心攻略</p>
                                <p><span class='nowPrice'>￥78.00</span>
                                    <span class='shidu'>试读</span>
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="zhuanlanItem">
                        <a href="">
                            <div class="bookImg">
                                <img src="./img/b2.jpg" alt="">
                            </div>
                            <div class="bookInfo">
                                <p>改善Go语言编程质量的50个有效实践</p>
                                <p><span class='nowPrice'>￥78.00</span>
                                    <span class='shidu'>试读</span>
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="zhuanlanItem">
                        <a href="">
                            <div class="bookImg">
                                <img src="./img/b3.jpg" alt="">
                            </div>
                            <div class="bookInfo">
                                <p>Python 源码深度剖析</p>
                                <p><span class='nowPrice'>￥68.00</span>
                                    <span class='shidu'>试读</span>
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="zhuanlanItem">
                        <a href="">
                            <div class="bookImg">
                                <img src="./img/b4.jpg" alt="">
                            </div>
                            <div class="bookInfo">
                                <p>32 堂微服务架构设计与落地精讲课</p>
                                <p><span class='nowPrice'>￥78.00</span>
                                    <span class='shidu'>试读</span>
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="zhuanlanItem">
                        <a href="">
                            <div class="bookImg">
                                <img src="./img/b5.jpg" alt="">
                            </div>
                            <div class="bookInfo">
                                <p>Java 并发编程深度解析</p>
                                <p><span class='nowPrice'>￥58.00</span>
                                    <span class='shidu'>试读</span>
                                </p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="bgPinTuan" id='bgPinTuan'>
            <div class="pinTuan">
                <div class='zhuanlan'>
                    <img src="./img/title-bg6.png" alt="">
                </div>
                <div class="tuanItems">
                    <div class="tuanItem">
                        <a href="">
                            <div class="TuanImg">
                                <img src="./img/p1.jpg" alt="">
                            </div>

                            <div class="newCInfo">
                                <p class='Intr'>Java并发编程的“基石”——多线程概念初识</p>
                                <p class='grade'>入门 · 4828人报名</p>
                                <p class='qian'><span class='clock'>3人拼团</span>
                                    <span class='nowPrice'>￥1.00</span>
                                    <span class='originPrice'>
                                        ￥69.00
                                    </span>
                                </p>
                            </div>
                        </a>

                    </div>
                    <div class="tuanItem">
                        <a href="">
                            <div class="TuanImg">
                                <img src="./img/p2.jpg" alt="">
                            </div>

                            <div class="newCInfo">
                                <p class='Intr'>快速了解新版Vue3.0 + Vite开发</p>
                                <p class='grade'>中级 · 1658人报名</p>
                                <p class='qian'><span class='clock'>3人拼团</span>
                                    <span class='nowPrice'>￥1.00</span>
                                    <span class='originPrice'>
                                        ￥36.00
                                    </span>
                                </p>
                            </div>
                        </a>

                    </div>
                    <div class="tuanItem">
                        <a href="">
                            <div class="TuanImg">
                                <img src="./img/p3.jpg" alt="">
                            </div>

                            <div class="newCInfo">
                                <p class='Intr'>Python GUI 实现连连看小游戏</p>
                                <p class='grade'>入门 · 368人报名</p>
                                <p class='qian'><span class='clock'>3人拼团</span>
                                    <span class='nowPrice'>￥1.00</span>
                                    <span class='originPrice'>
                                        ￥89.00
                                    </span>
                                </p>
                            </div>
                        </a>

                    </div>
                    <div class="tuanItem">
                        <a href="">
                            <div class="TuanImg">
                                <img src="./img/pintuan1.jpg" alt="">
                            </div>

                            <div class="newCInfo">
                                <p class='Intr'>Java异常与调优一站式解决方案</p>
                                <p class='grade'>初级 · 90人报名</p>
                                <p class='qian'><span class='clock'>3人拼团</span>
                                    <span class='nowPrice'>￥1.00</span>
                                    <span class='originPrice'>
                                        ￥48.00
                                    </span>
                                </p>
                            </div>
                        </a>

                    </div>
                </div>
            </div>
        </div>


        <aside class='leftAside'>
            <ul>
                <li><a href="#newCourse" class='activeA'>新上好课</a></li>
                <li><a href="#mustLearn">进站必学</a></li>
                <li><a href="#studyLines">学习路线</a></li>
                <li><a href="#moocColumns">慕课专栏</a></li>
                <li><a href="#bgPinTuan">限时拼团</a></li>
            </ul>
        </aside>
        <aside class='rightAside'>
            <ul>
                <li><a href="">
                        <i class='glyphicon glyphicon-comment'></i>
                        <span>意见反馈</span>
                    </a>
                </li>
                <li><a href="">
                        <i class='glyphicon glyphicon-question-sign'></i>
                        <span>帮助中心</span>
                    </a>
                </li>
                <li><a href="">
                        <i class="
glyphicon glyphicon-phone"></i>
                        <span>APP下载</span>
                        <div class="AppDownLoad">
                        </div>
                    </a>
                </li>
                <li><a href="">
                        <i class='iconfont icon-weixin'></i>
                        <span>官方微信</span>
                        <div class="WeiXinGF">
                        </div>
                    </a>
                </li>
                <li class='toTop'><a href="">
                        <i class='glyphicon glyphicon glyphicon-chevron-up'></i>
                        <span>返回顶部</span>
                    </a>
                </li>
            </ul>
        </aside>
        <footer>
            <ul class='footerUL'>
                <li><a href="">企业服务</a></li>
                <li><a href="">关于我们</a></li>
                <li><a href="">联系我们</a></li>
                <li><a href="">讲师招募</a></li>
                <li><a href="">帮助中心</a></li>
                <li><a href="">意见反馈</a></li>
                <li><a href="">慕课大学</a></li>
                <li><a href="">代码托管</a></li>
                <li><a href="">友情链接</a></li>
            </ul>
            <p>Copyright©&nbsp; 2021 imooc.com&nbsp;&nbsp; <a href=""> 京ICP备 12003892号-11 </a>&nbsp;<a href=""><img
                        src="./img/beianicon.png" alt=""> &nbsp;京公网安备11010802030151号</a> &nbsp;<a href="">营业执照</a></p>
            <div class="someLink">
                <div><i class='iconfont icon-shoucang activeI'></i>
                    <p>收藏网站</p>
                    <div class='SCtips'>
                        使用<b>Ctrl+D</b>可将网站添加到书签
                    </div>
                </div>
                <div><i class='iconfont icon-weixin'></i>
                    <p>官方公众号</p>
                    <div class='weixin'>

                    </div>
                </div>
                <div><i class='iconfont icon-weibo'></i>
                    <p>官方微博</p>
                </div>
                <div><i class='iconfont icon-qq'></i>
                    <p>官方空间</p>
                </div>
            </div>
        </footer>
        <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
        <script src='./js/index.js'></script>
</body>

</html>